<template>
	<view class="info-form">

		<form class="form">
			<view class="top">
				<text class="top-txt">验证手机号码</text>
			</view>

			<view class="num">
				<input type="tel" v-model="info.num" placeholder="请输入您的新手机号" placeholder-style="letter-spacing: 2rpx" />
			</view>
			<view class="code">
				<view class="in-code">
					<input type="number" v-model="info.code" placeholder="请输入验证码"
						placeholder-style="letter-spacing: 2rpx" />
				</view>
				<view class="get-code" @click="getCode">
					<text>获取验证码</text>
				</view>
			</view>
			<view class="button">
				<view class="no" @click="nosubmit">
					<text>取消</text>
				</view>
				<view class="yes" @click="submit">
					<text>确定</text>
				</view>
			</view>
		</form>
	</view>
</template>

<script>
  import util from "@/utils/util.js"
	export default {
		name: "my-info-form",
		data() {
			return {
        //当前生成的随机验证码
        code:"",
				info: {
					num: "",
					code: ""
				}
			}
		},
		methods: {
			nosubmit(){
				this.$emit("close")
				this.info.num=""
				this.info.code=""
			},
			submit() {
        if(this.info.num===''){
          uni.showToast({
            title:"请输入手机号",
            icon:"none"
          })
          return
        }
        if(this.info.num.length!==11){
          uni.showToast({
            title:"手机号格式有误",
            icon:"none"
          })
          return
        }
        if(this.info.code===''){
          uni.showToast({
            title:"请输入验证码",
            icon:"none"
          })
          return
        }
       if(this.code!==this.info.code){
         uni.showToast({
           title:"验证码输入不正确",
           icon:"none"
         })
         return
       }
        this.$emit("close",this.info.num)
				
			},
			getCode() {
        const code = util.genrateCode()
        this.code = code
				uni.showToast({
					title: `验证码：${code}`,
					icon: "none",
					duration:3500
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.info-form {
		// border: 1rpx solid red;
		width: 600rpx;
		height: 400rpx;
		background-color: #fff;

		.form {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 40rpx;
				margin-bottom: 30rpx;

				.top-txt {
					font-weight: bold;
					font-size: 35rpx;
					letter-spacing: 5rpx;
				}
			}

			.num {
				height: 20%;
				width: 90%;
				margin-left: 5%;
				border: 1rpx solid #000;
				display: flex;
				align-items: center;
				padding-left: 25rpx;
				box-sizing: border-box;
				margin-bottom: 30rpx;

			}

			.code {
				height: 20%;
				width: 90%;
				margin-left: 5%;
				// border: 1rpx solid #000;
				display: flex;
				justify-content: space-between;
				align-items: center;
				// padding-left: 30rpx;
				// box-sizing: border-box;
				margin-bottom: 30rpx;

				.in-code {
					display: flex;
					align-items: center;
					height: 100%;
					width: 45%;
					border: 1rpx solid #000;
					padding-left: 25rpx;
					box-sizing: border-box;
				}

				.get-code {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 45%;
					background-color: #000;
					color: #fff;

				}
			}

			.button {
				height: 20%;
				width: 90%;
				margin-left: 5%;
				// border: 1rpx solid #000;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// padding-left: 25rpx;
				// box-sizing: border-box;
				// margin-bottom: 30rpx;
				.no {
					height: 100%;
					width: 45%;
					border: 1rpx solid #000;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.yes {
					height: 100%;
					width: 45%;
					// border: 1rpx solid #000;
					background-color: #000;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>